<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <title>商家详情 - 美食外卖平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #FF6B6B;
      --secondary: #FFE8E8;
      --text: #333;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
      --radius-lg: 20px;
      --radius-md: 12px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --content-max-width: 1200px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', system-ui;
    }

    body {
      background: #F8F9FA;
      color: var(--text);
      padding-bottom: 160px;
    }

    /* 登录蒙层 */
    .login-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      backdrop-filter: blur(5px);
    }

    .login-prompt {
      text-align: center;
      padding: 40px;
      background: white;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      max-width: 400px;
      margin: 20px;
    }

    .login-prompt h2 {
      margin-bottom: 20px;
      color: var(--primary);
    }

    .login-btn {
      background: var(--primary);
      color: white;
      padding: 12px 40px;
      border-radius: 30px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
      display: inline-block;
      margin-top: 20px;
    }

    /* 头部系统 */
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      background: white;
      box-shadow: var(--shadow-md);
      z-index: 1000;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    .back-btn {
      font-size: 20px;
      color: var(--primary);
      margin-right: 15px;
      cursor: pointer;
    }

    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .header-actions {
      display: flex;
      gap: 15px;
    }

    .header-icon {
      font-size: 20px;
      color: var(--primary);
      cursor: pointer;
    }

    /* 商家信息 */
    .restaurant-header {
      margin-top: 60px;
      position: relative;
    }

    .restaurant-cover {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .restaurant-info {
      background: white;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 20px;
      margin-top: -30px;
      position: relative;
      z-index: 2;
      box-shadow: var(--shadow-sm);
    }

    .restaurant-name {
      font-size: 24px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .restaurant-badge {
      background: var(--secondary);
      color: var(--primary);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }

    .restaurant-meta {
      display: flex;
      gap: 15px;
      margin: 15px 0;
      color: #666;
      font-size: 14px;
    }

    .restaurant-rating {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #ff9800;
      font-weight: 600;
    }

    .restaurant-tags {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 15px 0;
    }

    .restaurant-tag {
      background: #f5f5f5;
      padding: 6px 12px;
      border-radius: 15px;
      font-size: 12px;
      color: #666;
    }

    /* 商家活动 */
    .restaurant-promo {
      background: white;
      padding: 15px 20px;
      margin: 10px 0;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .promo-item {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      align-items: center;
    }

    .promo-icon {
      color: var(--primary);
      font-size: 16px;
    }

    .promo-text {
      font-size: 14px;
      color: #666;
    }

    /* 商品分类导航 */
    .category-nav {
      position: sticky;
      top: 60px;
      background: white;
      z-index: 999;
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 10px 0;
      box-shadow: var(--shadow-sm);
    }

    .category-nav::-webkit-scrollbar {
      display: none;
    }

    .category-item {
      padding: 8px 20px;
      white-space: nowrap;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: var(--transition);
    }

    .category-item.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
      font-weight: 600;
    }

    /* 商品列表 */
    .menu-section {
      padding: 20px;
    }

    .section-title {
      font-size: 18px;
      margin: 20px 0 15px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-title i {
      color: var(--primary);
    }

    .menu-items {
      display: grid;
      gap: 15px;
    }

    .menu-item {
      background: white;
      border-radius: var(--radius-md);
      padding: 15px;
      box-shadow: var(--shadow-sm);
      display: flex;
      gap: 15px;
      transition: var(--transition);
      cursor: pointer;
    }

    .menu-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .item-image {
      width: 100px;
      height: 100px;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 2px solid var(--secondary);
    }

    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .item-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .item-desc {
      font-size: 13px;
      color: #999;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .item-price {
      color: var(--primary);
      font-weight: 800;
      font-size: 18px;
    }

    .item-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .item-sales {
      font-size: 12px;
      color: #999;
    }

    .add-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .add-btn:hover {
      transform: scale(1.1);
    }

    /* 购物车浮动按钮 */
    .cart-float {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      z-index: 1001;
      transition: var(--transition);
    }

    .cart-float:hover {
      transform: scale(1.1);
    }

    .cart-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #ffeb3b;
      color: #333;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
    }

    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 15px 0;
      box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
      z-index: 1002;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #666;
      transition: var(--transition);
      text-decoration: none;
      font-size: 13px;
      padding: 10px;
      border-radius: 15px;
      width: 80px;
    }

    .nav-item i {
      font-size: 20px;
    }

    .nav-item.active {
      /*color: var(--primary);*/
      /*background: var(--secondary);*/
      /*transform: translateY(-8px);*/
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .restaurant-cover {
        height: 180px;
      }

      .restaurant-info {
        padding: 15px;
      }

      .restaurant-name {
        font-size: 20px;
      }

      .menu-item {
        flex-direction: column;
      }

      .item-image {
        width: 100%;
        height: 150px;
      }
    }

    @media (max-width: 480px) {
      .restaurant-cover {
        height: 160px;
      }

      .restaurant-meta {
        flex-direction: column;
        gap: 8px;
      }

      .section-title {
        font-size: 16px;
      }

      .nav-item {
        font-size: 12px;
        padding: 8px;
        width: 70px;
      }
    }
  </style>
</head>
<body>
<!-- 登录蒙层 -->
<div class="login-mask" id="loginMask">
  <div class="login-prompt">
    <h2>请先登录</h2>
    <p>登录后查看商家详情</p>
    <a href="It'smine.html" class="login-btn">立即登录</a>
  </div>
</div>

<!-- 头部 -->
<header class="header">
  <div class="back-btn" onclick="history.back()">
    <i class="fas fa-chevron-left"></i>
  </div>
  <div class="header-title">川味火锅</div>
  <div class="header-actions">
    <i class="fas fa-search header-icon"></i>
    <i class="fas fa-share-alt header-icon"></i>
  </div>
</header>

<!-- 商家信息 -->
<div class="restaurant-header">
  <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
       class="restaurant-cover"
       alt="商家封面图">

  <div class="restaurant-info">
    <div class="restaurant-name">
      <span>川味火锅</span>
      <span class="restaurant-badge">品牌商家</span>
    </div>

    <div class="restaurant-meta">
      <div class="restaurant-rating">
        <i class="fas fa-star"></i>4.8
      </div>
      <div>月售1000+</div>
      <div>配送约30分钟</div>
    </div>

    <div class="restaurant-tags">
      <span class="restaurant-tag">人均 ¥78</span>
      <span class="restaurant-tag">川味火锅</span>
      <span class="restaurant-tag">麻辣鲜香</span>
      <span class="restaurant-tag">营业至23:00</span>
    </div>
  </div>

  <div class="restaurant-promo">
    <div class="promo-item">
      <i class="fas fa-tag promo-icon"></i>
      <div class="promo-text">满50减5，满100减15，满150减25</div>
    </div>
    <div class="promo-item">
      <i class="fas fa-clock promo-icon"></i>
      <div class="promo-text">11:00-14:00,17:00-21:00 全场8折</div>
    </div>
  </div>
</div>

<!-- 商品分类导航 -->
<div class="category-nav">
  <div class="category-item active">推荐</div>
  <div class="category-item">火锅套餐</div>
  <div class="category-item">锅底</div>
  <div class="category-item">荤菜</div>
  <div class="category-item">素菜</div>
  <div class="category-item">小吃</div>
  <div class="category-item">饮品</div>
</div>

<!-- 商品列表 -->
<main class="menu-container">
  <section class="menu-section">
    <h2 class="section-title">
      <i class="fas fa-fire"></i>
      推荐菜品
    </h2>

    <div class="menu-items">
      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-155256 Duff6-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="麻辣牛油锅底">
        <div class="item-info">
          <div>
            <h3 class="item-name">麻辣牛油锅底</h3>
            <p class="item-desc">精选四川牛油与多种香料熬制，麻辣鲜香，回味无穷</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥48</span>
            <span class="item-sales">月售356</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="肥牛拼盘">
        <div class="item-info">
          <div>
            <h3 class="item-name">肥牛拼盘</h3>
            <p class="item-desc">精选上等肥牛，肉质鲜嫩，入口即化</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥68</span>
            <span class="item-sales">月售289</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="蔬菜拼盘">
        <div class="item-info">
          <div>
            <h3 class="item-name">蔬菜拼盘</h3>
            <p class="item-desc">新鲜时令蔬菜组合，包含生菜、菠菜、金针菇等</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥28</span>
            <span class="item-sales">月售156</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="menu-section">
    <h2 class="section-title">
      <i class="fas fa-utensils"></i>
      火锅套餐
    </h2>

    <div class="menu-items">
      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="双人套餐">
        <div class="item-info">
          <div>
            <h3 class="item-name">双人套餐</h3>
            <p class="item-desc">麻辣牛油锅底+肥牛拼盘+蔬菜拼盘+毛肚+虾滑+饮料2杯</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥158</span>
            <span class="item-sales">月售432</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="四人套餐">
        <div class="item-info">
          <div>
            <h3 class="item-name">四人套餐</h3>
            <p class="item-desc">鸳鸯锅底+肥牛拼盘2份+羊肉卷+蔬菜拼盘+毛肚+虾滑+豆制品拼盘+饮料4杯</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥298</span>
            <span class="item-sales">月售256</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="menu-section">
    <h2 class="section-title">
      <i class="fas fa-pepper-hot"></i>
      锅底
    </h2>

    <div class="menu-items">
      <div class="menu-item">
        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
             class="item-image"
             alt="鸳鸯锅底">
        <div class="item-info">
          <div>
            <h3 class="item-name">鸳鸯锅底</h3>
            <p class="item-desc">麻辣牛油+菌菇汤底，满足不同口味需求</p>
          </div>
          <div class="item-actions">
            <span class="item-price">¥58</span>
            <span class="item-sales">月售312</span>
            <button class="add-btn">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- 购物车浮动按钮 -->
<div class="cart-float">
  <i class="fas fa-shopping-cart"></i>
  <div class="cart-badge">2</div>
</div>

<!-- 底部导航 -->
<nav class="bottom-nav">
  <a href="ShoppingCentre.html" class="nav-item">
    <i class="fas fa-home"></i>
    <span>首页</span>
  </a>
  <a href="Found.html" class="nav-item">
    <i class="fas fa-search"></i>
    <span>发现</span>
  </a>
  <a href="ShoppingCart.html" class="nav-item">
    <i class="fas fa-shopping-cart"></i>
    <span>购物车</span>
  </a>
  <a href="It'smine.html" class="nav-item active">
    <i class="fas fa-user"></i>
    <span>我的</span>
  </a>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // JWT验证
    const token = sessionStorage.getItem('token');
    const loginMask = document.getElementById('loginMask');

    if (!token) {
      loginMask.style.display = 'flex';
    } else {
      loginMask.style.display = 'none';
    }

    // 分类导航交互
    const categoryItems = document.querySelectorAll('.category-item');
    categoryItems.forEach(item => {
      item.addEventListener('click', () => {
        categoryItems.forEach(i => i.classList.remove('active'));
        item.classList.add('active');
      });
    });

    // 添加商品到购物车
    const addButtons = document.querySelectorAll('.add-btn');
    const cartBadge = document.querySelector('.cart-badge');
    let cartCount = parseInt(cartBadge.textContent);

    addButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        e.stopPropagation();

        // 检查是否登录
        if (!token) {
          loginMask.style.display = 'flex';
          return;
        }

        cartCount++;
        cartBadge.textContent = cartCount;

        // 添加动画效果
        button.innerHTML = '<i class="fas fa-check"></i>';
        setTimeout(() => {
          button.innerHTML = '<i class="fas fa-plus"></i>';
        }, 1000);
      });
    });

    // 购物车按钮点击
    document.querySelector('.cart-float').addEventListener('click', () => {
      // 检查是否登录
      if (!token) {
        loginMask.style.display = 'flex';
        return;
      }
      window.location.href = 'ShoppingCart.html';
    });
  });
</script>
</body>
</html>
